CHANGE

Closes #7, #8, #9, #11, #12

This PR introduces:

• Weather cards for all supported cities.
• City selection from cards and the city selector.
• Activity selection with activity-specific weather ranking.
• Sorting by best activity, temperature, precipitation and wind.
• Favorite cities persisted with localStorage.
• Selected city, activity and sorting persisted with sessionStorage.
• A centered detail overlay opened from each weather card.
• Responsive styling for desktop and mobile layouts.
• Loading, error and retry states.
• Accessible native buttons and select controls.
• Documentation in docs/weather-cards-and-ranking.md and docs/weather-app-architecture.md.

Out of scope

Filtering weather cards is part of roadmap issue #10 but is not included in this PR. This PR only implements sorting. Filtering should be handled in a follow-up PR.

VERIFICATION

Commands run:

npm test
npm run lint
npm run format:check
npm run build --workspace @t31/web
npm test -- --run web/src/WeatherExample.test.tsx

Results:

• 10 Vitest tests passed.
• ESLint passed with no warnings.
• Prettier formatting passed.
• Production build passed.
• git diff --check passed.

Manual browser checks still needed:

• Desktop layout with the detail overlay open.
• Mobile portrait and landscape layouts.
• Keyboard navigation through controls and cards.
• Closing the detail overlay with the close button and backdrop.
• Persistence after reload and browser restart.

COURSE REQUIREMENTS AND AI USE

Affected course requirements:

• React and TypeScript state and props.
• REST API data fetched with TanStack Query.
• Responsive design.
• Accessible semantic HTML and native controls.
• localStorage for favorites.
• sessionStorage for selected city, activity and sorting.
• Vitest tests, snapshots, mocked API responses and component interaction tests.
• ESLint and Prettier validation.
• Documentation of architecture and verification.

Architectural decisions:

• App owns selected city, activity, sorting, favorites and detail-view state.
• WeatherList renders reusable WeatherCard components.
• Weather responses remain in TanStack Query and are not persisted.
• Zod validates persisted storage values.
• Activity ranking uses explicit profiles with different temperature, precipitation, wind and snow preferences.
• Details are displayed in a centered overlay so the panel is not constrained by the selected card's grid column.

AI assistance:

• GitHub Copilot was used to help inspect the existing codebase, suggest component boundaries, implement parts of the React state and UI refactor, create focused tests, and draft documentation.
• The team reviewed and adjusted the generated changes, verified the implementation locally, and retained responsibility for the final architecture and code.

REVIEW

Reviewer checklist:

• Verify the card-first layout on desktop and mobile.
• Verify the centered detail overlay and its keyboard behavior.
• Verify activity-specific ranking changes when the activity changes.
• Verify localStorage favorites and sessionStorage preferences.
• Review accessibility and semantic HTML.
• Confirm all review comments are resolved.